<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI超级面试官平台 - 智能求职助手</title>
    <link href="/vendors/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/fontawesome/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --accent-color: #f093fb;
            --text-dark: #2d3748;
            --text-light: #718096;
            --bg-light: #f7fafc;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
        }

        /* 首页特殊样式调整 */
        body {
            padding-top: 0; /* 移除固定导航栏的padding */
        }

        /* 首页导航栏特殊样式 - 保持标准布局，只改变颜色 */
        .unified-navbar {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
            border-bottom: none !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
            /* 保持原有的布局属性 */
            height: 70px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .unified-navbar-container {
            /* 确保容器布局不变 */
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 24px;
            height: 100%;
        }

        .unified-navbar-left {
            flex-shrink: 0;
        }

        .unified-navbar-center {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .unified-navbar-menu {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .unified-navbar-right {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .unified-navbar-brand {
            color: white !important;
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .unified-navbar-brand:hover {
            color: rgba(255, 255, 255, 0.9) !important;
            text-decoration: none;
        }

        .unified-navbar-brand i {
            color: white !important;
            margin-right: 8px;
            font-size: 1.2rem;
        }

        .unified-nav-item {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .unified-nav-item i {
            margin-right: 6px;
            font-size: 14px;
        }

        .unified-nav-item:hover {
            color: white !important;
            background: rgba(255, 255, 255, 0.1) !important;
            text-decoration: none;
            transform: translateY(-1px);
        }

        .unified-nav-item.active {
            color: white !important;
            background: rgba(255, 255, 255, 0.15) !important;
            font-weight: 600;
        }

        .unified-nav-item.user-info {
            background: rgba(255, 255, 255, 0.15) !important;
            color: white !important;
            font-weight: 600;
            cursor: default;
        }

        .unified-nav-item.user-info:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
            transform: none;
        }

        /* 主要内容区域 */
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .hero-buttons .btn {
            margin: 0.5rem;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
        }

        .btn-light {
            background: white;
            color: var(--primary-color);
            border: none;
        }

        .btn-light:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-outline-light:hover {
            transform: translateY(-2px);
        }

        /* 功能特色 */
        .features-section {
            padding: 80px 0;
            background: var(--bg-light);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 3rem;
            color: var(--text-dark);
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            height: 100%;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .feature-description {
            color: var(--text-light);
            line-height: 1.6;
        }

        /* 快速开始 */
        .quick-start-section {
            padding: 80px 0;
            background: white;
        }

        .step-card {
            text-align: center;
            padding: 1.5rem;
        }

        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 50%;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .step-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        .step-description {
            color: var(--text-light);
            font-size: 0.95rem;
        }

        /* 页脚 */
        .footer {
            background: var(--text-dark);
            color: white;
            padding: 40px 0 20px;
            text-align: center;
        }

        .footer-content {
            margin-bottom: 2rem;
        }

        .footer-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 1.5rem;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 1rem;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .footer-links {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 统一导航栏 -->
    <div th:replace="~{fragments/navbar :: navbar('home')}"></div>

    <!-- 主要内容 -->
    <section class="hero-section">
        <div class="container">
            <h1 class="hero-title">智能求职，从这里开始</h1>
            <p class="hero-subtitle">
                一个简单实用的AI求职助手，帮助您找到心仪的工作机会
            </p>
            <div class="hero-buttons">
                <a href="/chat" class="btn btn-light btn-lg">
                    <i class="fas fa-comments me-2"></i>开始对话
                </a>
                <a href="/interview" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-clipboard-question me-2"></i>模拟面试题
                </a>
                <a href="/job-search" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-search me-2"></i>搜索职位
                </a>
            </div>
        </div>
    </section>

    <!-- 功能特色 -->
    <section class="features-section">
        <div class="container">
            <h2 class="section-title">核心功能</h2>
            
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3 class="feature-title">AI智能助手</h3>
                        <p class="feature-description">
                            24小时在线的AI求职顾问，为您提供个性化的面试指导和职业规划建议
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3 class="feature-title">智能职位搜索</h3>
                        <p class="feature-description">
                            基于您的需求智能匹配职位，快速找到合适的工作机会
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <a href="/interview" style="text-decoration: none; color: inherit;">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-clipboard-question"></i>
                            </div>
                            <h3 class="feature-title">模拟面试题</h3>
                            <p class="feature-description">
                                AI智能生成个性化面试题目，专业的面试技巧指导，助您在面试中脱颖而出
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 快速开始 -->
    <section class="quick-start-section">
        <div class="container">
            <h2 class="section-title">如何开始</h2>
            
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">1</div>
                        <h3 class="step-title">注册账号</h3>
                        <p class="step-description">
                            快速注册一个账号，开始您的求职之旅
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">2</div>
                        <h3 class="step-title">与AI对话</h3>
                        <p class="step-description">
                            告诉AI您的求职需求，获得个性化建议
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">3</div>
                        <h3 class="step-title">搜索职位</h3>
                        <p class="step-description">
                            使用智能搜索功能，找到最适合的工作机会
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <h5 class="footer-title">
                    <i class="fas fa-brain me-2"></i>AI超级面试官平台
                </h5>
                <p class="footer-description">
                    一个简单实用的个人项目，致力于用AI技术帮助求职者找到理想工作
                </p>
                <div class="footer-links">
                    <a href="/chat">AI助手</a>
                    <a href="/interview">模拟面试题</a>
                    <a href="/job-search">职位搜索</a>
                    <a href="/login">登录</a>
                    <a href="/register">注册</a>
                </div>
            </div>
            
            <div class="footer-bottom">
                                  <p>&copy; 2025 AI超级面试官平台 - 个人学习项目</p>
            </div>
        </div>
    </footer>

    <script src="/vendors/bootstrap/bootstrap.bundle.min.js"></script>
    
    <!-- 认证管理脚本 -->
    <script src="/js/auth.js"></script>
    
    <script>
        // 平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.unified-navbar');
            if (navbar) {
                if (window.scrollY > 50) {
                    navbar.style.background = 'linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%)';
                    navbar.style.backdropFilter = 'blur(10px)';
                } else {
                    navbar.style.background = 'linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)';
                    navbar.style.backdropFilter = 'none';
                }
            }
        });
    </script>
</body>
</html> 